<template>
	<view :style="viewColor">
		<view class="my-order">
			<view class="top-order-type acea-center">
				<view :class="order_type == 0 ? 'on' : ''" @click="clickOrderType(0)">好货订单</view>
				<view :class="order_type == 1 ? 'on' : ''" @click="clickOrderType(1)">服务订单</view>
			</view>
			<view class='header'>
				<view class='picTxt acea-row row-between-wrapper'>
					<view class="order-statistics">
						<view class="order-statistics-num">{{orderData.all || 0}}</view>
						<view class="order-statistics-tips">售出订单</view>
					</view>
					<view class="order-statistics">
						<view class="order-statistics-num">{{orderData.orderPrice || 0}}</view>
						<view class="order-statistics-tips">总收益</view>
					</view>
				</view>
			</view>
			<view class='nav acea-row row-around' v-if="order_type == 0">
				<view class='item' :class='orderStatus==-1 ? "on": ""' @click="statusClick(-1)">
					<view>全部</view>
					<view class='num'>{{orderData.all || 0}}</view>
				</view>
				<view class='item' :class='orderStatus==0 ? "on": ""' @click="statusClick(0)">
					<view>待发货</view>
					<view class='num'>{{orderData.noPostage || 0}}</view>
				</view>
				<view class='item' :class='orderStatus==1 ? "on": ""' @click="statusClick(1)">
					<view>待收货</view>
					<view class='num '>{{orderData.noDeliver || 0}}</view>
				</view>
				<view class='item' :class='orderStatus==2 ? "on": ""' @click="statusClick(2)">
					<view>已完成</view>
					<view class='num'>{{orderData.noComment || 0}}</view>
				</view>
			</view>
			<view class="order-list" v-if="list.length">
				<view class="order-item" v-for="(item, index) in list" :key="index">
					<view class="title">
						<view class="order-sn">订单编号:{{item.order_sn || ''}}</view>
						<view class="order-status">{{item.status_name || ''}}</view>
					</view>
					<view class="order-product" v-if="order_type == 1">
						<view class="order-product-img">
							<img :src="item.product_info.image[0]" />
						</view>
						<view class='order-product-info'>
							<view class="order-product-title line2">{{item.product_info.content || ''}}</view>
							<view class="order-product-nums">
								<view class="order-product-price">
									¥{{item.total_price || 0}}
								</view>
								<view class="order-product-num">×1</view>
							</view>
							<view class="order_description">共1件商品  合计<text class="order-total-price">¥{{item.total_price || 0}}</text></view>
						</view>
					</view>
					<view class="order-product" v-else>
						<view class="order-product-img">
							<img :src="item.product_info.thumb" />
						</view>
						<view class='order-product-info'>
							<view class="order-product-title line2">{{item.product_info.title || ''}}</view>
							<view class="order-product-nums">
								<view class="order-product-price">
									¥{{item.total_price || 0}}
								</view>
								<view class="order-product-num">×1</view>
							</view>
							<view class="order_description">共1件商品  合计<text class="order-total-price">¥{{item.total_price || 0}}</text></view>
						</view>
					</view>
					<view class="order-button">
						<view class="order-detail" v-if="order_type == 0" @click="orderDetail(item.order_id)">订单详情</view>
						<view class="order-send"  v-if="!item.status" @click="clickSendOrder(item.order_id, index)">点击发货</view>
					</view>
				</view>
			</view>
			<view class="send_order_popup" v-if="send_order_popup">
				<view class="send_order_content">
					<view class="send_order_name">
						<view class="send_order_title">快递名称</view>
						<input v-model="sendOrder.delivery_name" type="text" placeholder="请输入快递名称">
					</view>
					<view class="send_order_num">
						<view class="send_order_title">快递单号</view>
						<input v-model="sendOrder.delivery_id" type="text" placeholder="请输入快递单号">
					</view>
					<view class="send_order_button">
						<view class="send_order_fahuo" @click="clickSendOrder2">发货</view>
						<view class="send_order_close" @click="send_order_popup = !send_order_popup">关闭</view>
					</view>
				</view>
			</view>
		</view>
		<home></home>
		<authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
	</view>
</template>

<script>
	import {
		getUserProductOrderMerList,
		getUserProductOrderMerListCount,
		sendUserProductOrder
	} from "@/api/user_product"
	import { mapGetters } from "vuex";
	import { configMap } from "@/utils";
	import parser from "@/components/jyf-parser/jyf-parser";
	import home from '@/components/home/index.vue';
	import authorize from '@/components/Authorize';
	import { HTTP_REQUEST_URL } from '@/config/app';
	const app = getApp();
	export default {
		components: {
			"jyf-parser": parser,
			authorize,
			home,
		},
		data() {
			return {
				isAuto: false, //没有授权的不会自动授权
				isShowAuth: false, //是否隐藏授权
				page: 1,
				limit: 10,
				is_loading: true,
				list: [],
				orderStatus: -1,
				orderData: {},
				order_id: 0, // 发货ID记录
				send_order_popup: false, // 发货弹窗
				sendOrder: {
					index: 0,
					delivery_name: '',
					delivery_id: '',
				},
				domain: HTTP_REQUEST_URL,
				order_type: 0, // 0好货订单 1服务订单
			};
		},
		beforeDestroy() {
		},
		computed: {...configMap({sys_intention_agree:''},mapGetters(['isLogin','viewColor','keyColor']))
		},
		onLoad(options) {
			if (this.isLogin) {
				this.getList();
				this.getListCount();
			} else {
				this.isAuto = true;
				this.isShowAuth = true
			}
		},
		onShow() {
			if (this.isLogin) {
				this.getListCount();
			} else {
				this.isAuto = true;
				this.isShowAuth = true
			}
		},
		onReady() {},
		methods: {
			getList() {
				let that = this;
				if(!that.is_loading) return false;
				let data = {
					status: that.orderStatus == -1 ? '' : that.orderStatus,
					page: that.page,
					limit: that.limit,
					order_type: that.order_type
				}
				getUserProductOrderMerList(data).then(res=>{
					if (that.page == 1) {
						that.list = res.data.list
					} else {
						that.list = that.list.concat(res.data.list)
					}
					that.page++;
					that.is_loading = res.data.list.length >= that.limit;
				}).catch(err=>{
					that.$util.Tips({title: err});
				})
			},
			clickOrderType(order_type) {
				let that = this;
				that.order_type = order_type;
				that.getListCount();
				if (order_type == 1) {
					that.statusClick(2)
				} else {
					that.statusClick(-1)
				}
			},
			/**
			 * 切换类型
			 */
			statusClick: function(status) {
				if (status == this.orderStatus) return;
				this.orderStatus = status;
				this.is_loading = true;
				this.page = 1;
				this.getList();
			},
			getListCount() {
				getUserProductOrderMerListCount({order_type: this.order_type}).then(res=>{
					this.orderData = res.data
				}).catch(err=>{
					
				})
			},
			// 发货
			clickSendOrder(order_id, index) {
				this.order_id = order_id;
				this.sendOrder = {
					index: index,
					delivery_name: '',
					delivery_id: ''
				}
				this.send_order_popup = true;
			},
			clickSendOrder2() {
				let that = this;
				if(!that.sendOrder.delivery_name) return that.$util.Tips({title: '请填写快递名称'});
				if(!that.sendOrder.delivery_id) return that.$util.Tips({title: '请填写快递单号'});
				sendUserProductOrder(that.order_id, that.sendOrder).then(res=>{
					that.$util.Tips({title: '发货成功'}, function(){
						that.order_id = 0;
						that.sendOrder = {
							index: 0,
							delivery_name: '',
							delivery_id: ''
						}
						that.send_order_popup = false;
						that.getListCount();
					})
				}).catch(err=>{
					that.$util.Tips({title: err});
				})
			},
			orderDetail(order_id) {
				this.$util.Tips('/pages/extends/user_product/order_detail?is_shop=1&id='+order_id);
			},
			// 授权回调
			onLoadFun: function() {
				this.isShowAuth = false;
				return uni.switchTab({
					url: '/pages/user/index'
				});
			},
			// 授权关闭
			authColse: function(e) {
				this.isShowAuth = e
			}
		},
		onReachBottom() {
			this.getList();
		}
	}
</script>

<style scoped lang="scss">
	.my-order .header {
		height: 260rpx;
		padding: 0 30rpx;
		background-color: #FFE103;
	}
	.top-order-type {
		font-size: 36rpx;
		background-color: #FFE103;
		justify-content:  space-around;
		padding: 0 30rpx;
		view {
			border-bottom: 5rpx solid #FFE103;
		}
		.on {
			font-weight: bold;
			border-bottom: 5rpx solid #FE4504;
		}
	}
	.t-color{color: var(--view-theme);}
	.p-color{color: var(--view-priceColor);}
	.b-color{background-color:var(--view-theme);}
	.my-order .header .picTxt {
		padding-top: 50rpx;
		.order-statistics {
			flex: 1;
			text-align: center;
			.order-statistics-num {
				font-size: 44rpx;
				font-weight: 500;
				color: #323232;
				line-height: 44rpx;
			}
			.order-statistics-tips {
				font-size: 26rpx;
				font-weight: 400;
				color: #323232;
				line-height: 38rpx;
				margin-top: 18rpx;
			}
		}
	}
	.my-order .nav {
		background-color: #fff;
		width: 690rpx;
		// height: 140rpx;
		border-radius: 16rpx;
		margin: 0 auto;
		margin-top: -70rpx;
		padding: 40rpx 0;
	}
	
	.my-order .nav .item {
		flex: 1;
		text-align: center;
		font-size: 26rpx;
		font-weight: 400;
		color: #323232;
		line-height: 38rpx;
	}
	
	/* .my-order .nav .item.on {
		font-weight: bold;
		border-bottom: 5rpx solid var(--view-theme);
	} */
	
	.my-order .nav .item .num {
		margin-top: 14rpx;
		font-size: 36rpx;
		font-weight: 500;
		color: #323232;
		line-height: 44rpx;
	}
	.order-item {
		background-color: #fff;
		width: 690rpx;
		margin: 30rpx auto 0;
		padding: 30rpx;
		border-radius: 12rpx;
		.title {
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
			justify-content: space-between;
			font-size: 28rpx;
			font-weight: 400;
			color: #3E3939;
			line-height: 40rpx;
			.order-status {
				color: #1C211D;
			}
		}
		.order-product {
			display: flex;
			flex-wrap: nowrap;
			margin-top: 28rpx;
			.order-product-img {
				width: 208rpx;
				height: 208rpx;
				border-radius: 12rpx;
				image {
					width: 208rpx;
					height: 208rpx;
					border-radius: 12rpx;
				}
			}
			.order-product-info {
				flex: 1;
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				.order-product-title {
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
					line-height: 45rpx;
				}
				.order-product-nums {
					display: flex;
					flex-wrap: nowrap;
					justify-content: space-between;
					margin-top: 14rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #999999;
					line-height: 38rpx;
				}
			}
		}
		.order_description {
			margin-top: 28rpx;
			font-size: 26rpx;
			font-weight: 400;
			color: #333333;
			line-height: 38rpx;
			.order-total-price {
				font-size: 30rpx;
				font-weight: 500;
				color: #F50402;
				line-height: 38rpx;
			}
		}
		.order-button {
			margin-top: 30rpx;
			display: flex;
			justify-content: flex-end;
			.order-detail {
				border-radius: 30rpx;
				border: 1rpx solid #1C211D;
				padding: 10rpx 20rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #1C211D;
				line-height: 34rpx;
				display: flex;
				align-items: center; 
				border-radius: 30rpx;
				margin-left: 20rpx;
			}
			.order-send{
				padding: 10rpx 20rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #1C211D;
				line-height: 34rpx;
				display: flex;
				align-items: center; 
				background: #FFE103;
				border: 1rpx solid #FFE103;
				border-radius: 30rpx;
				margin-left: 20rpx;
			}
		}
	}
	.send_order_popup {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.6);
		.send_order_content {
			background-color: #fff;
			border-radius: 16rpx;
			margin: 300rpx 30rpx 0;
			padding: 30rpx;
			font-size: 34rpx;
			.send_order_num, .send_order_button {
				margin-top: 20rpx;
			}
			input {
				font-size: 30rpx;
				padding: 20rpx 0;
				border-bottom: 1px solid #F5F5F5;
			}
			.send_order_button {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 20rpx;
				font-size: 30rpx;
				font-weight: bold;
				.send_order_fahuo {
					background-color: var(--view-theme);
					border:1rpx solid var(--view-theme);
					padding: 10rpx 20rpx;
					border-radius: 16rpx;
				}
				.send_order_close {
					border:1rpx solid #F5F5F5;
					padding: 10rpx 20rpx;
					border-radius: 16rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>